<template>
    <div>
        <van-swipe class="centerBanner" :autoplay="3000" indicator-color="white" lazy-render><!-- 开启图片懒加载 -->
            <van-swipe-item class="bannerItem" v-for="(item,index) in listData" :key="index">
                <img class="bannerImg" :src="item.picUrl" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: 'Banner',
})
</script>

<script lang="ts" setup>
import { computed } from "vue";
export interface IbannerList{
  id:string | number,
  picUrl:string,
  targetUrl:string,
  extra?:any,
}

const props = defineProps<{
    bannerList:IbannerList[]
}>()

const listData = computed(()=>{
  return props.bannerList
})
</script>

<style lang="less" scoped>

.centerBanner {
    color: #fff;
    font-size: 20px;
    line-height: 148px;
    height: 148px;
    text-align: center;
    margin-bottom: 10px;

    .bannerImg {
      width: 100%;
      transform: translateY(-50%);
      top: 50%;
      position: absolute;
      left: 0;

      ::v-deep .van-swipe__indicator {  
        border-radius: 0;
        width: 20px;
        height: 2px;
      }
    }
  }


  ::v-deep .van-swipe__indicator {
        border-radius: 0;
        width: 20px;
        height: 2px;
      }
</style>